<template>
  <div class="housing-details-box" style="margin-bottom: 202px">
    <!-- 导航 -->
    <van-nav-bar
      :title="obj.community"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in obj.houseImg" :key="index">
        <van-image
          width="375"
          height="252"
          :src="'http://liufusong.top:8080' + item"
          lazy-load
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 房屋详情 -->
    <div class="housing">
      <h3>{{ obj.title }}</h3>
      <div class="housing_title">
        <span v-for="(item, index) in obj.tags" :key="index">{{ item }}</span>
      </div>
      <div class="housing_details">
        <div class="housing_details_zj">
          <div class="pic">
            <span>{{ obj.price }}</span
            >/月
          </div>
          <span>租金</span>
        </div>
        <div class="housing_details_zj">
          <div class="pic">
            <span>{{ obj.roomType }}</span>
          </div>
          <span>房型</span>
        </div>
        <div class="housing_details_zj">
          <div class="pic">
            <span>{{ obj.size }}平米</span>
          </div>
          <span>面积</span>
        </div>
      </div>
      <div class="housing_details_txt">
        <ul>
          <li><span>装修：</span>精装</li>
          <li>
            <span>朝向：</span
            >{{ obj.oriented.length ? obj.oriented[0] : '南' }}
          </li>
          <li><span>楼层：</span>{{ obj.floor }}</li>
          <li><span>类型：</span>普通住宅</li>
        </ul>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <div class="map_title">
        小区：<span>{{ obj.community }}</span>
      </div>
      <div class="map_item">
        <DiTu></DiTu>
      </div>
    </div>
    <!-- 房屋配套 -->
    <div class="mating">
      <div class="mating_title">房屋配套</div>
      <ul>
        <li>
          <p><i class="iconfont icon-kongdiao"></i></p>
          <span>空调</span>
        </li>
      </ul>
    </div>
    <!-- 房源概括 -->
    <div class="generalize">
      <div class="generalize_title">房源概括</div>
      <!-- 头像 -->
      <div class="generalize_user">
        <div class="left">
          <div class="pic">
            <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
          </div>
          <div class="txt">
            <p>王女士</p>
            <div class="icon">
              <van-icon name="shield-o" size="16" /> 已认证房主
            </div>
          </div>
          <span>发消息</span>
        </div>
      </div>
      <!-- 描述 -->
      <div class="generalize_txt">
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="related">
      <div class="related_title">猜你喜欢</div>
      <!-- 内容 -->
      <ul>
        <li>
          <div class="pic"><img src="" alt="" /></div>
          <div class="txt">
            <h3>天居园 2室1厅</h3>
            <span>83/南/高楼层</span>
            <div class="span">
              <span>随时看房</span>
            </div>
            <div class="rate"><span>4500</span> 元/月</div>
          </div>
        </li>
        <li>
          <div class="pic"><img src="" alt="" /></div>
          <div class="txt">
            <h3>天居园 2室1厅</h3>
            <span>83/南/高楼层</span>
            <div class="span">
              <span>随时看房</span>
            </div>
            <div class="rate"><span>4500</span> 元/月</div>
          </div>
        </li>
        <li>
          <div class="pic"><img src="" alt="" /></div>
          <div class="txt">
            <h3>天居园 2室1厅</h3>
            <span>83/南/高楼层</span>
            <div class="span">
              <span>随时看房</span>
            </div>
            <div class="rate"><span>4500</span> 元/月</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <div class="collect">
        <van-icon name="star-o" />
        <span>收藏</span>
      </div>
      <div class="consult">在线咨询</div>
      <div class="order">电话预约</div>
    </div>
  </div>
</template>

<script>
import DiTu from '@/components/ditu.vue'
import { housesInfo } from '@/api/sun'
export default {
  components: { DiTu },
  data() {
    return {
      obj: {}
    }
  },
  async created() {
    const id = this.$route.params.id
    const { body } = await housesInfo(id)
    this.obj = body
  },
  methods: {},
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
.housing-details-box {
  background-color: #f6f5f6;
}
// 底部栏
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  border-top: 1px solid #cecece;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  color: #999;
  .collect {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    flex: 1;
    border-right: 1px solid #e8e8e9;
    .van-icon {
      margin-right: 4px;
    }
  }
  .consult {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    flex: 1;
  }
  .order {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    flex: 1;
    background-color: #21b97a;
    color: #fff;
  }
}

// 导航
.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-size: 16px;
  }
}
// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 252px;
  text-align: center;
  background-color: #39a9ed;
}
// 房屋详情
.housing {
  height: 266px;
  background-color: #fff;
  padding: 15px;
  // 标题
  h3 {
    font-size: 16px;
    color: #333;
    font-weight: 300;
    margin: 16px 0;
  }
  // 标签
  .housing_title {
    width: 46px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e1f5f8;
    color: #39becd;
    font-size: 12px;
  }
  // 租金
  .housing_details {
    padding: 15px 0;
    margin: 15px 0;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    display: flex;
    .housing_details_zj {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 345px;
      height: 52px;
      .pic {
        font-size: 12px;
        color: #fa5741;
        margin-bottom: 6px;
        span {
          font-size: 18px;
          color: #fa5741;
          font-weight: 700;
        }
      }
      span {
        font-size: 14px;
        color: #999;
      }
    }
  }
  // 文本
  .housing_details_txt {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 26px;
        font-size: 13px;
        color: #333;
        span {
          font-size: 13px;
          color: #999;
          margin-right: 5px;
        }
      }
    }
  }
}
// 地图
.map {
  margin-top: 10px;
  height: 189px;
  background-color: #fff;
  .map_title {
    padding: 15px;
    font-size: 14px;
    color: #666;
    span {
      font-size: 14px;
      color: #333;
    }
  }
  .map_item {
    width: 375px;
    height: 145px;
    background-color: red;
  }
}
// 房屋配套
.mating {
  height: 130px;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0 10px;
  // 标题
  .mating_title {
    padding: 15px 0;
    margin-bottom: 10px;
    height: 48px;
    border-bottom: 1px solid #cecece;
    font-size: 15px;
    color: #333;
    font-weight: 700;
  }
  // 内容
  ul {
    height: 71px;
    display: flex;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      width: 71px;
      height: 51px;
      i {
        font-size: 23px;
      }
      span {
        display: inline-block;
        margin-top: 5px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}
// 房源概况
.generalize {
  height: 266px;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0 10px;
  // 标题
  .generalize_title {
    padding: 15px 0;
    margin-bottom: 10px;
    height: 48px;
    border-bottom: 1px solid #cecece;
    font-size: 15px;
    color: #333;
    font-weight: 700;
  }
  // 头像
  .generalize_user {
    height: 62px;
    margin-bottom: 10px;
    padding-top: 10px;
    .left {
      display: flex;
      align-items: center;
      .pic {
        width: 52px;
        height: 52px;
        background-color: blue;
        border-radius: 50%;
        img {
          width: 100%;
        }
      }
      .txt {
        margin-left: 15px;
        p {
          font-size: 14px;
          color: #333;
        }
        .icon {
          margin-top: 4px;
          font-size: 12px;
          color: #fa5741;
        }
      }
      span {
        width: 74px;
        height: 29px;
        border: 1px solid #33be85;
        text-align: center;
        line-height: 29px;
        color: #33be85;
        font-size: 14px;
        border-radius: 3px;
        margin-left: 116px;
      }
    }
  }
  // 描述
  .generalize_txt {
    padding: 10px 0;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
  }
}
// 猜你喜欢
.related {
  height: 266px;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0 10px;
  // 标题
  .related_title {
    padding: 15px 0;
    margin-bottom: 10px;
    height: 48px;
    border-bottom: 1px solid #cecece;
    font-size: 15px;
    color: #333;
    font-weight: 700;
  }
  // 内容
  ul {
    li {
      padding: 18px 0;
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      .pic {
        width: 106px;
        height: 80px;
        background-color: pink;
        img {
          width: 100%;
        }
      }
      .txt {
        margin-left: 12px;
        h3 {
          font-size: 15px;
          color: #394043;
          margin-bottom: 2px;
        }
        span {
          font-size: 12px;
          color: #afb2b3;
          margin: 2px 0;
        }
        .span {
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 58px;
            height: 20px;
            font-size: 12px;
            color: #39becd;
            background-color: #e1f5f8;
          }
        }
        .rate {
          margin-top: 4px;
          font-size: 12px;
          color: #fa5741;
          span {
            font-size: 16px;
            color: #fa5741;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
